<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/nav.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="wrapHeader">

    </div>
</body>
<script>
    // 载入公共头部的本质  => 通过ajax请求(对应的html结构) => 放到指定元素中

    // 问题?
    // ajax异步请求  => nav.js加载时(html结构还未生成) => js无效
    // 1. 生成之后在绑定 => 不是很合适(nav.js 已提取独立的js文件)
    //    升级: 等页面html生成完毕之后 动态的载入nav.js

    // 2. 

    // 手动实现  
    // $.ajax({
    //     type: "get",
    //     url: "./nav.html",
    //     // dataType: "html",
    //     success: function (html) {
    //         // console.log(html);
    //         $(".wrapHeader").html(html);

    //         var script = document.createElement("script");
    //         script.src = "../js/nav.js";

    //         document.head.append(script);

    //         script.onload = function () { //载入成功时执行的回调函数
    //             console.log("script 载入成功");
    //         }
    //     }
    // })

    // jquery
    // $(ele).load(url,callback)   载入远程 HTML 文件代码并插入至 DOM 中。

    // $.getScript(url,callback)   通过 HTTP GET 请求载入并执行一个 JavaScript 文件。


    $(".wrapHeader").load("./nav.html", function () {
        console.log("html载入成功");
        $.getScript("../js/nav.js", function () {
            console.log("JS载入成功");
        })
    })

</script>

</html>